<template>
  <div>
    <!-- 用药等级详情 -->
    <el-card class="card">
      <div class="header_box">
        <img
          :src="
            elderlyData.photo
              ? imgUrl + elderlyData.photo
              : 'http://123.57.237.81:8080/caresystem/upload/2024/11/26/20241126195954213.jpg'
          "
          style="width: 80px; height: 80px"
          alt=""
        />
        <div class="right">
          <div class="item">老人：&nbsp;&nbsp;&nbsp;{{ elderlyData.name }}</div>
          <div class="item">身份证号：&nbsp;&nbsp;&nbsp;{{ elderlyData.idCard }}</div>
          <div class="item">床位：&nbsp;&nbsp;&nbsp;{{ elderlyData.begName }}</div>
        </div>
      </div>
    </el-card>
    <el-card class="card">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" />
        <el-table-column prop="addTime" label="登记时间">
          <template #default="scope">
            {{ dayJs(scope.row.addTime).format("YYYY-MM-DD HH:mm") }}
          </template>
        </el-table-column>
        <el-table-column prop="familyName" label="登记人" />
        <el-table-column prop="counts" label="数量" />
        <el-table-column prop="expTime" label="有效期" />
        <el-table-column prop="sum" label="剂量" />
        <el-table-column prop="remarks" label="服法" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" link @click="update(scope.row.id)">编辑</el-button>
            <el-button type="primary" link @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; text-align: center">
        <el-button @click="back">返回</el-button>
      </div>
    </el-card>
    <AddMedicinelog v-if="dialogVisible" :currentId="currentId" @close="closeHandle" />
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { delDrugs, getDrugsListForElderly } from "@/api/medicalcare/medicinelogs/medicinelogs";
import dayJs from "dayjs";
import AddMedicinelog from "@/components/medicalcare/medicinelog/AddMedicinelog.vue";
import { AddParams, ListData } from "@/api/medicalcare/medicinelogs/type";
import { getElderlyModel } from "@/api/market/elderly/elderly";

const route = useRoute();
const router = useRouter();

// 图片根路径
const imgUrl = ref(import.meta.env.VITE_IMG_URL);

//表格数据
let tableData = ref<ListData[]>([]);
const dialogVisible = ref(false);
//获取老人存药列表
const getListForElderly = async (id: number) => {
  let res = await getDrugsListForElderly(id);
  // console.log("111res", res.list);
  tableData.value = res.list;
};

//关闭添加dialog
const closeHandle = (data: boolean) => {
  dialogVisible.value = false;
  if (data) {
    getListForElderly(Number(route.params.id));
  }
};

//当前修改id
const currentId = ref(0);
//编辑
const update = (id: number) => {
  currentId.value = id;
  dialogVisible.value = true;
};
//删除
const del = (id: number) => {
  ElMessageBox.confirm("是否确认删除", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await delDrugs(id);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      //刷新
      getListForElderly(Number(route.params.id));
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消 canceled",
      });
    });
};
//老人信息
let elderlyData = reactive({
  name: "",
  idCard: "",
  begName: "",
  photo: "",
});
//获取老人详情
const getElderlyDetail = async (id: number) => {
  let res = await getElderlyModel(id);

  Object.assign(elderlyData, res);
  // console.log("7788",res);
};

//返回
const back = () => {
  router.push("/medicalcare/medicinelogs");
};

onMounted(() => {
  if (route.params.id) {
    getListForElderly(Number(route.params.id));
    getElderlyDetail(Number(route.params.id));
  }
});
</script>

<style scoped>
.card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;

  .header_box {
    display: flex;

    .right {
      margin-left: 30px;

      .item {
        margin-bottom: 18px;
      }
    }
  }
}
</style>
